useLayoutEffect

React에서 useLayoutEffect 훅은 컴포넌트의 레이아웃이 변하기 전에 실행되어야 하는 작업을 처리할 때 사용됩니다. 일반적으로 DOM이 업데이트된 후에 실행되는 useEffect와 달리, useLayoutEffect는 DOM 변경 후, 그리기 전에 실행됩니다. 이로 인해 DOM의 일관성을 유지하고, 레이아웃이나 UI의 깜빡임을 방지할 수 있습니다.

`useLayoutEffect`를 사용하는 이유

useLayoutEffect는 화면에 렌더링 되기 전에 실행되므로, DOM 조작이 필요한 경우에 유용합니다. 예를 들어, DOM 요소의 크기나 위치를 측정하고, 이를 기반으로 스타일을 조정해야 할 때 사용됩니다.

다음은 간단한 예제입니다. 이 예제에서는 DOM 요소의 크기를 측정하고 이를 상태에 저장하여 렌더링에 반영하는 방법을 보여줍니다.

import React, { useState, useLayoutEffect, useRef } from 'react';

function MeasureExample() {
  const [boxSize, setBoxSize] = useState({ width: 0, height: 0 });
  const boxRef = useRef(null);

  useLayoutEffect(() => {
    if (boxRef.current) {
      const { width, height } = boxRef.current.getBoundingClientRect();
      setBoxSize({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Measure this box
      </div>
      <p>Box width: {boxSize.width}px</p>
      <p>Box height: {boxSize.height}px</p>
    </div>
  );
}

export default MeasureExample;

코드 설명

상태 선언: useState를 사용하여 boxSize라는 상태를 선언합니다. 이 상태는 박스의 크기를 저장합니다.
참조 생성: useRef를 사용하여 boxRef라는 참조를 생성합니다. 이 참조는 특정 DOM 요소를 직접 가리킵니다.
useLayoutEffect 사용: 컴포넌트가 렌더링된 후, 하지만 화면에 그려지기 전에 useLayoutEffect가 실행됩니다. 이 훅은 boxRef가 가리키는 DOM 요소의 크기를 측정하고, 그 값을 boxSize 상태에 저장합니다.
렌더링: boxSize 상태를 사용하여 박스의 크기를 화면에 출력합니다.

주의해야 할 점

성능: useLayoutEffect는 동기적으로 실행되므로, 컴포넌트의 렌더링 성능에 영향을 줄 수 있습니다. 따라서, DOM 조작이 필요하지 않은 경우에는 useEffect를 사용하는 것이 더 좋습니다.
비동기 동작: useLayoutEffect 내부에서는 비동기 작업을 처리하지 않는 것이 좋습니다. 비동기 작업은 useEffect에서 처리하는 것이 더 적절합니다.

더 알아보기

React 훅: React 공식 문서에서 다양한 훅에 대해 더 알아보세요.
useEffect와 useLayoutEffect 차이점: React 공식 문서에서 두 훅의 차이점을 확인하세요.
DOM 조작: MDN 문서에서 DOM 조작에 대한 자세한 정보를 얻으세요.

내용 요약

useLayoutEffect는 React에서 DOM이 업데이트된 후, 화면에 그려지기 전에 실행되는 훅입니다. 이를 사용하여 DOM 조작 및 레이아웃 측정을 처리할 수 있으며, 주로 화면 깜빡임을 방지하고 레이아웃의 일관성을 유지하는 데 유용합니다. 성능에 주의하면서 적절한 상황에서 사용해야 합니다.